import React from "react";

import Grid from "@material-ui/core/Grid";

import { useTranslation } from "react-i18next";
import { Redirect, Route, Switch } from "react-router-dom";

import ForgetPasswordEmail from "./components/ForgetPasswordEmail";
import ForgetPasswordPhone from "./components/ForgetPasswordPhone";

export default function ForgetPassword() {
  const { t } = useTranslation();

  const backgroundImage = require("./../../assets/images/LoginPage/backgroundImage.jpg");
  const logo = require("./../../assets/images/LoginPage/logo.svg");

  return (
    <>
      <div className="app-wrapper min-vh-100 bg-white">
        <div className="app-inner-content-layout--main app-content p-0">
          <div className="bg-composed-wrapper--content flex-grow-1 w-100 d-flex align-items-center">
            <Grid container spacing={0} className="min-vh-100 ">
              <Grid item lg={5} xl={6} className="d-flex">
                <div className="background-gradient">
                  <img
                    src={backgroundImage}
                    alt="background"
                    className="background-image"
                  />
                  <div className="left-box-content">
                    <div className="greeting-box">
                      <img
                        src={logo}
                        alt="bitbine-logo"
                        className="logo-image"
                      />
                      <div className="greeting-text font-size-xxxl my-4">
                        {t("form:welcome-bitbine")}
                      </div>
                    </div>
                    <div className="left-box-bottom font-size-xxl mx-auto">
                      {t("form:form-desc")}
                    </div>
                  </div>
                </div>
              </Grid>
              <Grid
                item
                lg={7}
                xl={6}
                className="d-flex align-items-center singup-form"
              >
                <Grid
                  item
                  md={10}
                  lg={8}
                  xl={7}
                  className="mx-auto forget-box-container mt-4"
                >
                  <Switch>
                    <Redirect
                      exact
                      from="/forgetPassword"
                      to="/forgetPassword/email"
                    />

                    <Route
                      path="/forgetPassword/email"
                      component={ForgetPasswordEmail}
                    />
                    <Route
                      path="/forgetPassword/phoneNumber"
                      component={ForgetPasswordPhone}
                    />
                  </Switch>
                </Grid>
              </Grid>
            </Grid>
          </div>
        </div>
      </div>
    </>
  );
}
